<template>
  <div style="max-height: 500px;">
    <el-dialog :title="title" :visible.sync="visible" width="30%" center :close-on-click-modal="false">
      <i class="el-icon-star-on star" :class="{yellow:collected}" style=" font-size: 30px;vertical-align: middle;"
        @click="collect"></i>
      <span style="color: white;white-space:normal;">
        <v-md-preview v-katex :text="content"></v-md-preview>
      </span>
      <span slot="footer" class="dialog-footer" style="display: flex;justify-content: space-between;">
        <el-input v-model="inputQuestion" placeholder="请输入你对该题的困惑" style="background-color: inherit;"></el-input>
        <el-button style="width: 30%;" class="okButton" @click="submit">发送题目至bot</el-button>
      </span>
      <div class="relate-father-box">
        <div class="relate-box">
          <span>本题常见问题</span>
          <div class="box-item" v-for="(item,index) in questionCommon" :key="item.id">
            {{ index+1 }}.{{ item.content }}
          </div>
        </div>
        <div class="relate-box">
          <span>本题相关知识点</span>
          <div class="box-item text-hidden" v-for="(item, index) in questionKnowledge" :key="item.id">
            {{ index + 1 }}.{{ item.content }}
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getProblemFromServe, CollectProblem,isCollected,CancelCollectProblem} from '@/api/problem.js'
export default {
  data() {
    return {
      id:0,
      visible: false,
      title: '',
      content: '',
      inputQuestion:'',
      collected:false,
      questionCommon:[
       // { id: 1, content: "怎么创建二维数组" }, { id: 2, content: "为什么我这道题超时" }, { id: 3, content: "这个题为什么要用冒泡排序" }
      ],
      questionKnowledge:[
        //{ id: 1, content: "二维数组" }, { id: 2, content: "排序" }, { id: 3, content: "二分查找" }
      ]
    }
  },
  props: {
    popUpVisible: Boolean,
    fatherMethod: Function,
  },
  model: {
    prop: 'popUpVisible',
    event: 'change'
  },
  watch: {
    'popUpVisible': {
      handler(newVal) {
        this.visible = newVal
      }
    },
    'visible': {
      handler(newVal) {
        this.$emit('change', newVal)
      }
    }
  },
  methods: {
    submit() {
      let text=this.inputQuestion+'\n'+this.title+'\n'+this.content
      this.fatherMethod(text)
      this.visible = false
    },
    async init(id){
      this.id=id
      this.inputQuestion=''
      let res=await getProblemFromServe(id)
      this.title=res.data.data.name
      this.content =this.enterToSpace(res.data.data.description)
      let qc = res.data.data.questionCommon
      this.questionCommon = qc.split(',').map((e,index)=>{
        return {id:index,content: e}
      })

      this.questionKnowledge = res.data.data.questionKnowledge.split(',').map((e, index) => {
        return { id: index, content: e }
      })
      await this.isCollect()
      setTimeout(() => {
        this.$forceUpdate()
      }, 100);
      
    },
    enterToSpace(text){

      // 使用正则表达式替换
      let result = text.replace(/\$[^$]*\$/g, function (match) {
        return match.replace(/\r\n/g, "");
      });
      console.log(result)
      return result
    },
    async isCollect(){
      let res = await isCollected(this.id)
      console.log(res)
      this.collected=res.data.data
    },
    async collect(){
      if(this.collected){
        await CancelCollectProblem(this.id)
        this.isCollect()
      }
      else{
        await CollectProblem(this.id)
        this.isCollect()
      }
    },
    

  },
  computed:{
    starcolor:function(){
      if(this.collected){
        return 'yellow'
      }
      else{
        return 'grey'
      }
    }
  }
}
</script>

<style>
.el-dialog {
  border-radius: 20px !important;
  background-color: #080A0B !important;
  margin-top: 20vh !important;
}
.el-dialog__body{
  max-height: 200px !important;
  overflow: scroll !important;
}
.el-dialog__title {
  color: white !important;
  font-weight: bold;
}

.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
  color: white !important;
}

.dialog-input {
  background-color: #080A0B !important;
}

.cancelButton {
  width: 40%;
  margin: 0 10px !important;
  color: white !important;
  background-color: #333333 !important;
  border: none !important;
  border-radius: 20px !important;
}

.okButton {
  width: 40%;
  margin: 0 10px !important;
  color: black !important;
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 20px !important;
}
.star{
  margin-top: 10px;
  position: relative;
	z-index: 11;
  float: right;
  /* margin-right: 75%; */
  caret-color: rgba(0, 0, 0, 0)
}
.yellow{
  color:#ffcc00;
}
.relate-father-box{
  position: absolute;
  left: 100%;
  transform: translateX(100px);
  z-index: 10000;
  top: -38px;
}
.relate-box{
  width:250px;
  height:200px;
  background-color: black;
  margin: 20px;
  z-index: 10000;
  border-radius: 20px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  padding-top: 10px;
  align-items: center;
  /*文本水平居中 */
  text-align: center;
}
.box-item{
  color: gray;
  margin-top: 15px;
  font-weight: normal;
  font-size: 14px;
}
</style>